Skip to content

Simplify CSS when using utilities that use a *-0 or *-1 value#20196

Merged
RobinMalfait merged 10 commits into
tailwindlabs:mainfrom
akx:zero
Jun 3, 2026
Merged

Simplify CSS when using utilities that use a *-0 or *-1 value#20196
RobinMalfait merged 10 commits into
tailwindlabs:mainfrom
akx:zero

Conversation

@akx
Copy link
Copy Markdown
Contributor

@akx akx commented Jun 3, 2026

Why?

While inspecting a Tailwind-powered site, I noticed selectors like

.inset-0{inset:calc(var(--spacing) * 0)}
.inset-x-0{inset-inline:calc(var(--spacing) * 0)}
.top-0{top:calc(var(--spacing) * 0)}

which seem a bit silly, not to mention more complex for the end-user device parsing the CSS.

Summary

This PR adjusts helpers to not generate calc(... * 0) expressions.

#19095 does a similar thing on CSS AST, but that doesn't run during the build proper.

Test plan

Ran pnpm build && pnpm test && pnpm test:integration. (Some unrelated tests failed on my machine, hopefully less in CI.)

@akx akx requested a review from a team as a code owner June 3, 2026 12:59
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented Jun 3, 2026

Confidence Score: 5/5

Safe to merge — the changes are purely additive CSS output optimizations with no behavioral regressions.

All three code paths (spacing() early-return, spacingUtility bare-value delegation, and angle-utility literal returns) are logically correct and backed by new snapshot tests covering 0, 0px, 1, 1px, and negative variants. The zero-detection logic in space-x/space-y correctly handles both named spacing values and arbitrary length values. No edge case yields wrong CSS.

No files require special attention. The only minor note is the duplicated zero-detection IIFE in utilities.ts for space-x and space-y.

Reviews (4): Last reviewed commit: "keep invalid data invalid" | Re-trigger Greptile

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jun 3, 2026

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • ✅ Review completed - (🔄 Check again to review again)

Walkthrough

The PR short-circuits spacing calculations: the spacing() CSS function returns literal 0 for zero dimensions and the resolved multiplier for 1; utilities emit --spacing(...) for bare values and special-case mask-linear/conic numeric degrees for 0/1. space-x/space-y zero detection now outputs literal 0 margins. Tests and snapshots were updated to add zero-variants (space/divide/mask/text) and expect simplified outputs. CHANGELOG.md records the change.

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main change: simplifying CSS output for utilities using 0 or 1 multiplier values, which aligns with the core optimization across all modified files.
Description check ✅ Passed The description is directly related to the changeset, providing clear context about the motivation (unnecessary calc() expressions), the solution approach, and test coverage for the optimization work.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@RobinMalfait RobinMalfait self-assigned this Jun 3, 2026
@RobinMalfait
Copy link
Copy Markdown
Member

Thanks! I had a similar change in a local branch the other day when working on that PR you linked! Technically using just 0 isn't always safe because then we often lose the data type. It can also make some calculations that were invalid, valid all of a sudden (e.g.: 0deg * 0rem is invalid, but a result of 0 would be valid).

That said, we can definitely make some assumptions here. In order for Tailwind CSS to work with the --spacing variable, we need to assume that:

  1. The --spacing value is set (it can be overridden at runtime, but it must still be set)
  2. The --spacing value must be set to a <length> type such as 0.25rem.

These conditions must be true in order for the framework to function properly.

I'm going to make some (small) changes here:

  1. Instead of hardcoding this logic in most places, we can use the --spacing(…) helper in the utilities instead. This has the benefit that we only have to tackle this in a single spot, and that CSS-based plugins can make use of this optimization automatically as well.
  2. There's a spot where you omitted a CSS variable when the 0 value is used. I'm going to put this back for 2 reasons:
    1. This changes the order in the CSS because fewer properties were used
    2. In the HTML, some other classes could be using this information. Deleting it would make accessing this variables' value invalid.
  3. There is another optimization we can do here with the 1 value. calc(var(--spacing) * 1) is also a little bit silly, we can replace this with just var(--spacing).

@RobinMalfait RobinMalfait changed the title Avoid generating useless multiplications by zero Simplify CSS when using utilities that use a *-0 or *-1 value Jun 3, 2026
@akx
Copy link
Copy Markdown
Contributor Author

akx commented Jun 3, 2026

Good stuff, thanks for taking a look @RobinMalfait!

I was also thinking about the * 1 case, but decided to leave it out of this PR to test the waters, as it were :)

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/tailwindcss/src/css-functions.test.ts`:
- Line 179: Update the test title string in the test named "--spacing(…)
optimizes the output when the input is `1` (with an inline themed)" to correct
the typo: change "with an inline themed" to "with an inline theme" so the test
reads "--spacing(…) optimizes the output when the input is `1` (with an inline
theme)"; locate the test declaration in
packages/tailwindcss/src/css-functions.test.ts (the test(...) call around that
title) and update the string accordingly.
- Line 131: The test name contains a typo: change the string in the test
declaration for the test named "--spacing(…) optimizes the output when the input
is `0` (with an inline themed)" to read "(with an inline theme)". Locate the
test call (the test(...) invocation) in css-functions.test.ts and update the
description text to replace "themed" with "theme" so the test name reads
correctly.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 2a2b974b-ad95-4c39-97bf-1296ff3e9d81

📥 Commits

Reviewing files that changed from the base of the PR and between f74e213 and 6ca3cfb.

📒 Files selected for processing (5)
  • CHANGELOG.md
  • packages/tailwindcss/src/css-functions.test.ts
  • packages/tailwindcss/src/css-functions.ts
  • packages/tailwindcss/src/utilities.test.ts
  • packages/tailwindcss/src/utilities.ts
✅ Files skipped from review due to trivial changes (1)
  • CHANGELOG.md

Comment thread packages/tailwindcss/src/css-functions.test.ts Outdated
Comment thread packages/tailwindcss/src/css-functions.test.ts Outdated
@RobinMalfait RobinMalfait enabled auto-merge (squash) June 3, 2026 16:26
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/tailwindcss/src/utilities.ts`:
- Around line 2124-2143: The zero fast-path incorrectly treats any alphabetic
unit as a valid zero and misses negative-zero forms; update the zero detection
logic (the zero variable that uses dimensions.get and the value variable) to
first normalize value when it matches --spacing(...) to collapse -0 to 0 (e.g.,
map '--spacing(-0)' -> '--spacing(0)'), then call dimensions.get(value) and only
treat it as zero if parsed indicates numeric zero AND the unit is unitless, a
length unit or '%' (check parsed[1] for '' or '%' or a length unit token),
otherwise fall back to non-zero; apply the same change to both space-x and
space-y branches that compute margin-inline-start/end so only legitimate
length/percentage zeroes use the fast-path.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: ba29513d-d0d1-46d2-8bc6-e51fe08c27f4

📥 Commits

Reviewing files that changed from the base of the PR and between 70854a5 and 1ae070e.

📒 Files selected for processing (3)
  • packages/tailwindcss/src/css-functions.test.ts
  • packages/tailwindcss/src/utilities.test.ts
  • packages/tailwindcss/src/utilities.ts
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/tailwindcss/src/css-functions.test.ts
  • packages/tailwindcss/src/utilities.test.ts

Comment thread packages/tailwindcss/src/utilities.ts
`space-x-[0deg]` stays as:
```css
.space-x-\[0deg\] {
  :where(& > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(0deg * var(--tw-space-x-reverse));
    margin-inline-end: calc(0deg * calc(1 - var(--tw-space-x-reverse)));
  }
}
```

And will not be optimized to just:
```css
.space-x-\[0deg\] {
  :where(& > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline: 0;
  }
}
```
@RobinMalfait RobinMalfait merged commit efae52c into tailwindlabs:main Jun 3, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants